<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>发布</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link th:href="@{/animate.min.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/common.js}"></script>


    <style>
        a {
            cursor: pointer;
        }

        .line {
            border-bottom: 2px solid #eee;
            margin-bottom: 5px;
            height: 2%;
        }
    </style>

</head>
<body style="background-color: #F8F8F8;overflow-x: hidden">
<div>

    <!--    顶部导航-->
    <div class="layui-header" style="background-color: black;">
        <ul class="layui-nav layui-layout-left" style="background-color: black">
            <li class="layui-nav-item"><a
                    onclick="window.location.href='/user/index?loginName='+ getQueryVariable('loginName')">首页</a></li>
            <li class="layui-nav-item"><a
                    onclick="window.location.href='/user/myTopic?loginName='+ getQueryVariable('loginName')">我的话题</a>
            </li>
            <li class="layui-nav-item"><a
                    onclick="window.location.href='/user/followedTopic?loginName='+ getQueryVariable('loginName')">关注话题</a>
            </li>
            <li class="layui-nav-item"><a
                    onclick="window.location.href='/user/info?loginName='+ getQueryVariable('loginName')">个人中心</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right" style="background-color: black">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <span><text th:text="${param.loginName}"></text></span>
                </a>
            </li>
            <li class="layui-nav-item"><a th:href="@{/userController/logout}">退出</a></li>
        </ul>
    </div>


    <!--    内容-->
    <div id="topicsArea" style="position: center">
        <div class="animated fadeIn" style="display: flex;justify-content: center;padding: 30px">
            <div style="width: 80%;height: 530px;background-color: #fff;border: solid #E0E0E0 1px;border-radius:
                            15px;box-shadow:0 0 10px #E0E0E0;padding:10px">

                <!--                标题栏-->
                <div style="display: flex;padding: 10px;align-items: center;height: 5%">
                    <div style="width: 85%;">
                        <span style="font-size: 18px">发布</span>
                    </div>
                </div>

                <div class="line"></div>

                <form id="addTopicForm">
                    <!--     信息-->
                    <div class="layui-row" style="height: 75%;padding: 15px">
                        <!--       标题-->
                        <div style="height: 40px;justify-content: center;padding: 12px">
                            <div class="layui-col-md1 layui-col-md-offset1" style="text-align: center;height: 90%">
                                <label style="position: relative;top: 5px" for="title">标题</label>
                            </div>
                            <div class="layui-col-md9" style="height: 90%;">
                                <input id="title" name="title"
                                       style="height:30px;width:89%;border-radius: 7px;padding-left: 8px;border: 2px solid black;"
                                       type="text">
                            </div>
                        </div>

                        <!--       正文-->
                        <div style="height: 130px;justify-content: center;padding: 12px">
                            <div class="layui-col-md1 layui-col-md-offset1" style="text-align: center;height: 90%">
                                <label style="position: relative;top: 50px" for="content">正文</label>
                            </div>
                            <div class="layui-col-md8">
                            <textarea id="content" name="content" rows="5" style="border-radius: 8px;border: 2px solid black;width:
                             100%;padding: 6px;position: relative;top: 12px"></textarea>
                            </div>
                        </div>

                        <!--       图片 板块-->
                        <div style="height: 100px;justify-content: center;padding: 12px">
                            <div class="layui-col-md1 layui-col-md-offset1" style="text-align: center;height: 90%">
                                <label style="position: relative;top: 33px" for="imgFile">图片</label>
                            </div>
                            <div class="layui-col-md3">
                                <img id="previewImg"
                                     style="border-radius: 8px;border: 2px solid black;width: 100%;height: 80px">
                                <input type="file" id="imgFile" name="imgFile" style="display: none;">
                            </div>

                            <div class="layui-col-md1 layui-col-md-offset1" style="text-align: center;height: 90%">
                                <label style="position: relative;top: 33px" for="tagId">板块</label>
                            </div>
                            <div class="layui-col-md4">
                                <select id="tagId" name="tagId" style="border-radius: 8px;border: 2px solid black;width:
                             79%;padding: 6px;position: relative;top: 27px">

                                </select>
                            </div>
                        </div>

                        <!--       登录名      -->
                        <input style="display: none" id="loginName" name="loginName">
                        <!--       id      -->
                        <input style="display: none" id="id" name="id">

                        <!--      确认按钮-->
                        <div style="height: 100px;justify-content: center;padding: 12px">
                            <div class="layui-col-md2 layui-col-md-offset5">
                                <button type="button" class="layui-btn" id="commit" lay-filter="addTopicForm" lay-submit
                                        style="background-color: #000000;color: white;width: 100%;border-radius: 10px; position: relative; top: 20px;">
                                    确认
                                </button>
                            </div>
                        </div>

                    </div>
                </form>

            </div>
        </div>
    </div>
</div>


<script th:src="@{/layui/jquery-1.11.2.js}"></script>
<script th:src="@{/layui/layui.all.js}" charset="utf-8"></script>
<script>
    $(function () {
        layui.use(['element', 'form', 'table', 'layer'], function () {
            var element = layui.element;
            var form = layui.form;
            var table = layui.table;
            var layer = layui.layer;

            $("#loginName").val(getQueryVariable("loginName"));

            loadTags(layer);

            //隐藏文件上传按钮后触发文件上传的方法
            $("#previewImg").click(function () {
                $("#imgFile").click();
            });
            //预览上传的图片
            $("#imgFile").change(function () {
                let file = this.files[0];
                var objUrl = getObjectURL(file);
                if (objUrl) {
                    $("#previewImg").attr("src", objUrl);
                }
            });

            //根据type判断是新增还是修改
            if (getQueryVariable("type") == 'create') {   //新增


                form.on('submit(addTopicForm)', function (data) {
                    if ($("#title").val() != '' && $("#content").val() != '' && $("#tagId").val() != '') {
                        let formData = new FormData(data.form);
                        $.ajax({
                            url: "/topicController/addTopic",
                            data: formData,
                            contentType: false,//默认是表单数据，要传递json字符串就写application/json，文件就用multipart/form-data(有boundary分隔符),两者都有最好是false
                            processData: false,//默认为true,会将数据转换成字符串格式上传，若传输文件则会发生错误
                            type: 'post', //ajax请求方式post,get
                            success: function (resp) { //请求成功后的回调函数
                                layer.msg(resp.msg);
                                setTimeout(() => run(), 1800);

                                async function run() {
                                    await setTimeout;
                                    window.history.go(-1);
                                }
                            }
                        });
                    } else {
                        layer.msg("请完善信息");
                    }
                });

            } else if (getQueryVariable("type") == 'modify') {  //修改
                $("#id").val(getQueryVariable("id")); //提交话题id
                $.get("/topicController/getTopicById", {id: getQueryVariable("id")}, function (resp) {
                    if (resp.code == 0) {
                        let title = $("#title");
                        let content = $("#content");
                        let tagId = $("#tagId");
                        title.val(resp.data.title);
                        content.val(resp.data.content);
                        tagId.val(resp.data.tagId);
                    } else {
                        layer.msg(resp.msg);
                    }
                });

                form.on('submit(addTopicForm)', function (data) {
                    if ($("#title").val() != '' && $("#content").val() != '' && $("#tagId").val() != '') {
                        let formData = new FormData(data.form);
                        $.ajax({
                            url: "/topicController/modifyTopic",
                            data: formData,
                            contentType: false,//默认是表单数据，要传递json字符串就写application/json，文件就用multipart/form-data(有boundary分隔符),两者都有最好是false
                            processData: false,//默认为true,会将数据转换成字符串格式上传，若传输文件则会发生错误
                            type: 'post', //ajax请求方式post,get
                            success: function (resp) { //请求成功后的回调函数
                                layer.msg(resp.msg);
                                setTimeout(() => run(), 1800);

                                async function run() {
                                    await setTimeout;
                                    window.history.go(-1);
                                }
                            }
                        });
                    } else {
                        layer.msg("请完善信息");
                    }
                });

            }

        });
    });


    //获得上传的图片的url
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

    function loadTags(layer) {
        let tagId = $("#tagId");

        $.get("/topicController/loadTags", null, function (resp) {
            if (resp.code == 0) {
                $.each(resp.data, function (index, tag) {
                    tagId.append(" <option value='" + tag.id + "'>" + tag.tagName + "</option>");
                });
            } else {
                layer.alert(resp.msg);
            }
        }, "json");
    }

</script>
</body>
</html>